<template>
    <div id="employmentInformation" class="print-div font-color">
        <div class="horizontal-vertical-center">
            <span class="font-weight">员工入职登记表</span>
        </div>
        <table
            border="1"
            cellspacing="0"
            cellpadding="0"
            style="width: 100%; margin-top: 16px; text-align: center; height: calc(100% - 40px); border-color: gray; border-radius: 5px;"
        >
            <tr :style="trHeight">
                <th :style="thWidth">姓名</th>
                <td :style="tdWidth">
                    {{ rowData.name }}
                </td>
                <th :style="thWidth">性别</th>
                <td :style="tdWidth" colspan="2">
                    {{ rowData.gender }}
                </td>
                <td :style="tdWidth" rowspan="4">
                    <img v-if="rowData.img" :src="`${VUE_APP_SYSTEM_API}${rowData.img}`" style="max-height: 130px;" />
                </td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">民族</th>
                <td :style="tdWidth">
                    {{ rowData.nation }}
                </td>
                <th :style="thWidth">籍贯</th>
                <td :style="tdWidth" colspan="2">
                    {{ rowData.nativePlace }}
                </td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">身份证号</th>
                <td :style="tdWidth">
                    {{ rowData.idNumber }}
                </td>
                <th :style="thWidth">出生日期</th>
                <td :style="tdWidth" colspan="2">
                    {{ formatYearMonthDate(rowData.birthday) }}
                </td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">学历</th>
                <td :style="tdWidth">
                    {{ rowData.education }}
                </td>
                <th :style="thWidth"></th>
                <td :style="tdWidth" colspan="2">
                </td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">政治面貌</th>
                <td :style="tdWidth" colspan="2"></td>
                <th :style="thWidth">户口所在地</th>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">家庭住址</th>
                <td :style="tdWidth" colspan="2"></td>
                <th :style="thWidth">家庭电话</th>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">任职部门</th>
                <td :style="tdWidth"></td>
                <th :style="thWidth">职务</th>
                <td :style="tdWidth"></td>
                <th :style="thWidth">职称</th>
                <td :style="tdWidth"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">参加工作时间</th>
                <td :style="tdWidth" colspan="2"></td>
                <th :style="thWidth">入职时间</th>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">毕业院校</th>
                <td :style="tdWidth"></td>
                <th :style="thWidth">专业</th>
                <td :style="tdWidth"></td>
                <th :style="thWidth">学年</th>
                <td :style="tdWidth"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">外语语种</th>
                <td :style="tdWidth" colspan="2"></td>
                <th :style="thWidth">计算机等级</th>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth" rowspan="5">教育经历</th>
                <th :style="thWidth">时间</th>
                <th :style="thWidth">学校名称</th>
                <th :style="thWidth">专业</th>
                <th :style="thWidth" colspan="2">证书情况</th>
            </tr>
            <tr :style="trHeight">
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth" rowspan="3">工作经历</th>
                <th :style="thWidth">工作时间</th>
                <th :style="thWidth">工作单位</th>
                <th :style="thWidth">职位</th>
                <th :style="thWidth" colspan="2">离职原因</th>
            </tr>
            <tr :style="trHeight">
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth"></td>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">人事部意见</th>
                <td :style="tdWidth" colspan="2"></td>
                <th :style="thWidth">用人部意见</th>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
            <tr :style="trHeight">
                <th :style="thWidth">领导签字</th>
                <td :style="tdWidth" colspan="2"></td>
                <th :style="thWidth">日期时间</th>
                <td :style="tdWidth" colspan="2"></td>
            </tr>
        </table>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { formatYearMonthDate } from '@/uitils/formatTime'

// 变量
const VUE_APP_SYSTEM_API = window.URL_CONFIG.VUE_APP_SYSTEM_API
const props = defineProps({
    rowData: {
        type: Object,
        default: {
            name: '',
            gender: '',
            nation: '',
            nativePlace: '',
            idNumber: '',
            birthday: '',
            education: '',
            // 0:待审核；1：通过；2：审核中；3：拒绝
            AuditStatus: 0,
            img: ''
        }
    }
})
const trHeight = ref(
    {
        height: '30px'
    }
)
const thWidth = ref(
    {
        width: '100px'
    }
)
const tdWidth = ref(
    {
        width: '100px'
    }
)
</script>
  
<style lang="less" scoped>
.print-div {
    height: 710px;
    overflow: auto;
}

.font-color {
    color: black;
}

.horizontal-vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-weight {
    font-weight: bold;
}
</style>
  